
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {

    var Controller = {
        index: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    index_url: 'youxi/index' + location.search,
                    add_url: 'youxi/add',
                    edit_url: 'youxi/edit',
                    del_url: 'youxi/del',
                    multi_url: 'youxi/multi',
                    import_url: 'youxi/import',
                    table: 'youxi',
                }
            });

            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                pk: 'id',
                sortName: 'id',
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'icon', title: __('Icon'), formatter: Table.api.formatter.image},
                        {field: 'name', title: __('Name')},
                        {field: 'created_at', title: __('Created_at')},
                        {field: 'updated_at', title: __('Updated_at')},
                        {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, formatter: Table.api.formatter.operate}
                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);
        },
        add: function () {
            Controller.api.bindevent();
            var tpl =   "<tr>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[grade][]' /></td>" +
                "<td width='60px'><span class='btn btn-danger btn-del btn-sm'>删除</span></td>" +
                "</tr>";
            Controller.api.bind(tpl)
            var tpl1 =   "<tr>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[price][][key]' /></td>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[price][][value]' /></td>" +
                "<td width='60px'><span class='btn btn-danger btn-del btn-sm'>删除</span></td>" +
                "</tr>";
            Controller.api.bind1(tpl1)
            Controller.api.bindDel('.btn-del')

            // region-table-price
        },
        edit: function () {
            Controller.api.bindevent();
            var tpl =   "<tr>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[grade][]' /></td>" +
                "<td width='60px'><span class='btn btn-danger btn-del btn-sm'>删除</span></td>" +
                "</tr>";
            Controller.api.bind(tpl)
            var tpl1 =   "<tr>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[price][][key]' /></td>" +
                "<td width='100px'><input class='form-control' data-rule='required' name='row[price][][value]' /></td>" +
                "<td width='60px'><span class='btn btn-danger btn-del btn-sm'>删除</span></td>" +
                "</tr>";
            Controller.api.bind1(tpl1)
            Controller.api.bindDel('.btn-del')
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
                require(['jquery-tagsinput'], function () {
                    //标签输入
                    var elem = "#c-tagss";
                    var tags = $(elem);
                    tags.tagsInput({
                        width: 'auto',
                        defaultText: '输入后空格确认',
                        minInputWidth: 110,
                        height: '36px',
                        placeholderColor: '#999',
                        onChange: function (row) {
                            if (typeof callback === 'function') {

                            } else {
                                $(elem + "_addTag").focus();
                                $(elem + "_tag").trigger("blur.autocomplete").focus();
                            }
                        },
                        autocomplete: {
                            url: '',
                            minChars: 1,
                            menuClass: 'autocomplete-tags'
                        }
                    });
                });
            },
            bind: function(tpl) {
                $('.btn-add-region', document).on('click', function() {
                    $('.region-table tbody').append(tpl)
                    Controller.api.bindDel('.btn-del')
                })
            },
            bind1: function(tpl) {
                $('.btn-add-price', document).on('click', function() {
                    $('.region-table-price tbody').append(tpl)
                    Controller.api.bindDel('.btn-del')
                })
            },
            bindDel: function(el) {
                $(el).unbind('click')
                $(el).click(function() {
                    $($(this).parents('tr')[0]).remove()
                })
            }
        }
    };
    return Controller;
});




